$(document).ready(function(){
    var link = "https://img.qianyitian.com/poems.json";

    $.getJSON(link, function (data) {
        var poems=data;
        genHTML(poems);
    });


    function genHTML(poems) {
        let lists =  poems.map(poemItem => {
            const sectionList = poemItem.sectionList.map(sentences => {
                // 遍历返回一个句内容 poem-paragraph  sentence 格式是数组
                const sentence = sentences.sentences.map(ele => {
                    return `<div class="poem-paragraph">${ele}</div>`;
                })
                // 将返回的 poem-paragraph 链接成字符串 
                let targetSentences = '';
                sentence.forEach(e => {
                    targetSentences = targetSentences + e;
                });
                // 遍历返回一个句 poem-section  poem-section 格式是数组
                return `<div class="poem-section">${targetSentences}</div>`;
            });
            // 将返回的 poem-section 链接成字符串 
            let targetSectionList = '';
            sectionList.forEach(e => {
                targetSectionList = targetSectionList + e;
            });
            // 拼接成目标诗词card 格式
            const itme = `<div class="poem-card">
                                <h2 class="poem-title">${poemItem.title}</h2>
                                <div class="poem-content">
                                    ${targetSectionList}
                                </div>
                                <div class="poem-comment">注:${poemItem.comment}</div>
                            </div>`;
            return itme;
        });
        
        $(".content-container").html(lists);
    }
});